<template>
    <div class="edu-page-warp">
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="filter"
            @reset="reset('queryForm')"
        >
            <el-form :model="queryForm" label-position="right" label-width="80px" ref="queryForm">
                <el-row :gutter="24">
                    <!-- <el-col span="8">
                        <el-form-item label="管理部门:">
                            <el-select v-model="queryForm.projId" style="width: 100%;">
                                <el-option
                                    v-for="item in options.project"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8" v-if="'1'==queryForm.projId">
                        <el-form-item label="学期:">
                            <el-select v-model="queryForm.schoolCalendarId" 
                            filterable clearable style="width: 100%;">
                                <el-option
                                    v-for="item in options.schoolCalendarId"
                                    :key="item.id"
                                    :label="item.fullName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item :label="$t('label.grade')+':'">
                            <el-select v-model="queryForm.grade" 
                            filterable clearable style="width: 100%;">
                                <el-option
                                    v-for="item in options.grade"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="'1'!==queryForm.projId">
                        <el-form-item label="开课学期:">
                            <el-select v-model="queryForm.term" filterable clearable 
                            style="width: 100%;">
                                <el-option
                                    v-for="item in options.term"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="课程类别:">
                            <el-select v-model="queryForm.nature"
                            filterable clearable style="width: 100%;">
                                <el-option
                                    v-for="item in options.nature"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="8">
                        <el-form-item label="开课学院:">
                            <el-select v-model="queryForm.college" style="width: 100%;" :disabled="role != 4">
                                <el-option
                                    v-for="item in options.college"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="开课学院:">
                            <el-select v-model="queryForm.college" filterable clearable
                            style="width: 100%;">
                                <el-option
                                    v-for="item in options.college"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="培养层次:">
                            <el-select v-model="queryForm.trainingLevel" filterable clearable
                            style="width: 100%;">
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所在校区:">
                            <el-select v-model="queryForm.campus" filterable clearable
                            style="width: 100%;">
                                <el-option
                                    v-for="item in options.campus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="'1'==queryForm.projId">
                        <el-form-item label="选课状态:">
                            <el-select v-model="queryForm.status" filterable clearable
                            style="width: 100%;">
                                <el-option
                                    v-for="item in options.status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
         <el-card v-loading="loading" shadow="never" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">个人计划选课统计</h1>
            <div class="div-main clearfix">
                <div class="float-left">
                    <el-input
                        v-model="queryForm.condition"
                        placeholder="输入课程编号和课程名称"
                        style="width:200px"
                        @keyup.enter.native="filter"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="filter"
                        ></i>
                    </el-input>
                </div>
                <div class="float-right">
                    <!-- <el-button>未选课名单</el-button> -->
                    <el-button @click="exportNoList">未选课名单</el-button>
                    <el-button v-if="queryForm.projId !=1" type="primary" @click="exportList">导出</el-button>
                </div>
            </div>
            <el-table
                stripe
                :data="data"
                size="mini"
                ref="courseTable"
                @selection-change="handleSelectionChange"
                tooltip-effect="light"
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="courseCode" label="课程代码" min-width="120"></el-table-column>
                <el-table-column prop="courseName" label="课程名称" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="grade" label="年级" v-if="'1'==queryForm.projId"></el-table-column>
                <el-table-column prop="term" label="开课学期"></el-table-column>
                <el-table-column prop="nature" label="课程类别"></el-table-column>
                <el-table-column prop="college" label="开课学院" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="cridits" label="学分"></el-table-column>
                <el-table-column prop="period" label="总学时"></el-table-column>
                <el-table-column prop="trainingLevel" label="培养层次"></el-table-column>
                <el-table-column prop="campus" label="所在校区" show-overflow-tooltip v-if="'1'==queryForm.projId"></el-table-column>
                <el-table-column label="已选课人数" width="90">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="viewStudents(scope.row.courseCode, 1)"
                        >{{scope.row.selCourseCount}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="未选课人数" width="90">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="viewStudents(scope.row.courseCode, 2)"
                        >{{scope.row.noSelCourseCount}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="及格人数"  width="80">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="viewStudents(scope.row.courseCode, 3)"
                        >{{scope.row.scorePassCount}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="不及格人数"  width="90">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="viewStudents(scope.row.courseCode, 4)"
                        >{{scope.row.noScorePassCount}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <ViewStudnets
            :is-show="showViewStudentsDialog"
            :course-code="currentCourseCode"
            :view-type="currentType"
            :projId="projIds"
            :filterData="this.queryForm"
            v-on:change-visible="closeViewStudentsDialog"
        />
    </div>
</template>
<script>
import bus from 'common/src/utils/bus';
import { queryDic, findTrainingLevelByProjId } from "common/src/api/dictionary";
import {
    selectCoursesCountList,
    exportNoSelCourseCountStudentInfo,
    exporCurentPage
} from "common/src/api/culture/culturePlan";
import Calendars from "common/src/api/calendars.js";
import { findFaculty } from "common/src/api/faculty";
import UTILS from "common/src/utils/utils";
import ViewStudnets from "./ViewStudnets";
import { getPower,findAllDeptList } from 'common/src/api/culture/culturePlan';
export default {
    name: "personalPlanManage",
    components: { ViewStudnets },
    data() {
        //绑定年级
        let now = new Date();
        let currentYear = now.getFullYear() + 1,
            minYear = currentYear - 11;
        let curGrade = [];
        for (let grade = currentYear; grade > minYear; grade--) {
            let obj = { label: grade, value: grade };
            curGrade.push(obj);
        }
        return {
            queryForm: {
                schoolCalendarId: "",
                grade: "",
                term: "",
                nature: "",
                college: "",
                trainingLevel: "",
                campus: "",
                status: "",
                projId: "",
                condition: "",
                pageSize_: 20,
                pageNum_: 1,
                total_: 0,
                courseCodeStr: ""
            },
            options: {
                project: [],
                schoolCalendarId: [],
                grade: curGrade,
                term: [],
                nature: [],
                college: [],
                trainingLevel: [],
                campus: [],
                status: []
            },
            data: [],
            keys: ["X_GLBM", "X_PYCC", "X_XQ", "X_KKXQ", "X_KCXZ"],
            keyValues: {
                campus: "X_XQ",
                //college: "X_YX",
                term: "X_KKXQ",
                nature: "X_KCXZ",
                project: "X_GLBM"
            },
            currentCourseCode: "",
            currentType: 0,
            showViewStudentsDialog: false,
            exportRows: [],
            role:'',
            projIds:'',
        };
    },
    mounted() {
        this.init();
        this.getRole();
        bus.$on('updateCurrentManageDeptId', (id) => {
            this.queryForm.projId = id;
            this.filter();
        })
    },
    watch: {
        "queryForm.projId": "changeTrainingLevelOptions"
    },
    methods: {
        handleSelectionChange(rows) {
            this.exportRows = rows;
        },
        // exportNoList() {
        //     this.queryForm.courseCodeStr = this.exportRows
        //         .map(item => item.courseCode)
        //         .join(",");
        //     exportNoSelCourseCountStudentInfo(this.queryForm);
        // },
        // exportList() {
        //     this.queryForm.courseCodeStr = this.exportRows
        //         .map(item => item.courseCode)
        //         .join(",");
        //     this.queryForm.pageSize = this.queryForm.pageSize_
        //     this.queryForm.pageNum = this.queryForm.pageNum_   
        //     exporCurentPage(this.queryForm);
        // },
        exportNoList() {
            this.queryForm.courseCodeStr = this.exportRows
                .map(item => item.courseCode)
                .join(",");
                console.log(this.queryForm)
            exportNoSelCourseCountStudentInfo(this.queryForm);
        },
        exportList() {
            this.queryForm.courseCodeStr = this.exportRows
                .map(item => item.courseCode)
                .join(",");;
            this.queryForm.pageSize = this.queryForm.pageSize_
            this.queryForm.pageNum = this.queryForm.pageNum_   
            exporCurentPage(this.queryForm);
        },
        closeViewStudentsDialog() {
            this.showViewStudentsDialog = false;
        },
        viewStudents(courseCode, type) {
            this.currentCourseCode = courseCode;
            this.currentType = type;
            this.projIds = this.queryForm.projId
            this.showViewStudentsDialog = true;
        },
        getRole(){
            getPower().then((res) => {
                this.role = res.data.power
                // if(res.data.departmentCode.indexOf(",") !=-1){
                //     let departmentCode = res.data.departmentCode.split(",")
                //     this.queryForm.college = departmentCode[0]
                // }else{
                //     this.queryForm.college = res.data.departmentCode
                // }
            })
        },
        init() {
            this.initOptions();
            this.getCollege();
            this.filter();
        },
        initOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: this.keys
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(this.keyValues, res.data, this.options);
                    //this.queryForm.projId = "1";
                }
            });
            Calendars.searchCalendarList({
                pageNum_: 1,
                pageSize_: 1000
            }).then(res => {
                this.options.schoolCalendarId = res.data.list;
            });
        },
        getCollege(){
            findAllDeptList().then(res => {
                if (res.code == 200) {
                    this.options.college = res.data.map(item => {
                        return {
                            label: item.deptName,
                            value: item.deptCode
                        }
                    })
                }
            });
        },
        reset() {
            // if(this.role == 3){
            //     this.queryForm.schoolCalendarId = "";
            //     this.queryForm.grade = "";
            //     this.queryForm.term = "";
            //     this.queryForm.nature = "";
            //     this.queryForm.trainingLevel = "";
            //     this.queryForm.campus = "";
            //     this.queryForm.status = "";
            //     this.selectCoursesCountList();
            // }else{
            //     this.queryForm.schoolCalendarId = "";
            //     this.queryForm.grade = "";
            //     this.queryForm.term = "";
            //     this.queryForm.nature = "";
            //     this.queryForm.college = "";
            //     this.queryForm.trainingLevel = "";
            //     this.queryForm.campus = "";
            //     this.queryForm.status = "";
            //     this.selectCoursesCountList();
            // }
            this.queryForm.schoolCalendarId = "";
                this.queryForm.grade = "";
                this.queryForm.term = "";
                this.queryForm.nature = "";
                this.queryForm.college = "";
                this.queryForm.trainingLevel = "";
                this.queryForm.campus = "";
                this.queryForm.status = "";
                this.selectCoursesCountList();
            //   this.$refs['queryForm'].resetFields()
           // this.queryForm.projId = "1";
        },
        filter() {
            this.selectCoursesCountList();
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.selectCoursesCountList();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.selectCoursesCountList(false);
        },
        changeTrainingLevelOptions() {
            this.queryForm.trainingLevel = "";
            findTrainingLevelByProjId(this.queryForm.projId).then(res => {
                if (res.code === 200) {
                    this.loadTrainingLevelOptions("trainingLevel", res.data);
                }
            });
        },
        loadTrainingLevelOptions(optionKey, dataObj) {
            this.options[optionKey] = [];
            _.each(dataObj, level => {
                this.options[optionKey].push({
                    label:
                        "en" === this.$store.getters.language
                            ? level.nameEN
                            : level.nameCN,
                    value: level.code
                });
            });
        },
        selectCoursesCountList(isFirstPage = true) {
            let queryForm = this.queryForm
            if (isFirstPage) {
               queryForm.pageNum_ = 1;
            }
            for (let key in queryForm) {
                // 去掉参数
                if (key === 'pagNum' || key === 'pageSize') {
                    continue;
                }
            }
            selectCoursesCountList(queryForm).then(res => {
                if (res.code == 200) {
                    this.data = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        }
    }
};
</script>
<style scoped>
    .div-main {
        margin-bottom: 16px;
    }
</style>